<template>
  <div class="g-2048">
    <h1 class="title">{{ msg }}</h1>
    <div class="console">
      <div class="row" v-for="(arr, i) in currData">
        <span
          :id="'cell-' + i + '-' + j"
          :class="'item num-' + n"
          v-for="(n, j) in arr"
        >
          {{ n == 0 ? "&nbsp;" : n }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import EventUtil from "./EventUtil";
import { random, next } from "./support";
import { MessageBox } from 'mint-ui';

export default {
  name: "Game2048",
  data() {
    return {
      msg: "2048",
      animateClass: "",
      currData: [
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
      ],
      optedData: [],
    };
  },
  created() {
    this.optedData = this.currData;
    window.app = this;

    this.randomNum();
    this.randomNum();

    MessageBox('提示', '操作成功');

    // MessageBox.prompt("请输入姓名").then(({ value, action }) => {
    //   console.info(value);
    // });

    EventUtil.listenTouchDirection(
      document,
      true,
      this.moveToUp,
      this.moveToRight,
      this.moveToDown,
      this.moveToLeft
    );
  },
  methods: {
    randomNum() {
      // console.info("产生随机数");
      let result = false;
      let flag = true;
      let _i = 0;

      while (flag) {
        let i = random(0, 4);
        let j = random(0, 4);

        if (this.optedData[i][j] == 0 && flag) {
          this.optedData[i][j] = next();
          flag = false;
          result = true;
        }

        if (_i == 9999) {
          flag = false;
        } else {
          _i++;
        }
      }

      return result;
    },
    move(fn) {
      this.optedData = JSON.parse(JSON.stringify(this.currData));
      let while_flag = true;
      let random_flag = false;

      while (while_flag) {
        while_flag = false;
        for (let i = 0; i < 4; i++) {
          for (let j = 0; j < 4; j++) {
            let { a, b } = fn(i, j);
            let f = this.c(a, b);
            if (f) {
              while_flag = true;
              random_flag = true;
            }
          }
        }
      }

      if (random_flag) {
        this.randomNum();
        this.triggerData();
      }
    },
    moveToUp() {
      //         fadeInDownBig: '向下快速淡入',
      //         fadeInLeftBig: '向右快速淡入',
      //         fadeInRightBig: '向左快速淡入',
      //         fadeInUpBig: '向上快速淡入',

      this.animateClass = "animate__fadeInUpBig";
      console.info("向上移动");
      this.move((i, j) => {
        return {
          a: { i, j },
          b: { i: i + 1, j },
        };
      });
    },
    moveToDown() {
      this.animateClass = "animate__fadeInDownBig";
      console.info("向下移动");

      this.move((i, j) => {
        return {
          a: { i: 3 - i, j },
          b: { i: 2 - i, j },
        };
      });
    },
    moveToLeft() {
      this.animateClass = "animate__fadeInRightBig";
      console.info("向左移动");

      this.move((i, j) => {
        return {
          a: { i, j },
          b: { i, j: j + 1 },
        };
      });
    },
    moveToRight() {
      this.animateClass = "animate__fadeInLeftBig";
      console.info("向右移动");

      this.move((i, j) => {
        return {
          a: { i, j: 3 - j },
          b: { i, j: 2 - j },
        };
      });
    },

    c(a, b) {
      let i1 = a.i;
      let j1 = a.j;

      let i2 = b.i;
      let j2 = b.j;
      if (i1 < 0 || j1 < 0 || i2 < 0 || j2 < 0) {
        return false;
      }

      if (i1 >= 4 || j1 >= 4 || i2 >= 4 || j2 >= 4) {
        return false;
      }

      if (this.optedData[i1][j1] == this.optedData[i2][j2]) {
        this.optedData[i1][j1] = this.optedData[i1][j1] * 2;
        this.optedData[i2][j2] = 0;

        if (this.optedData[i1][j1] > 0) {
          return true;
        } else {
          return false;
        }
      } else if (this.optedData[i1][j1] == 0) {
        this.optedData[i1][j1] = this.optedData[i2][j2];
        this.optedData[i2][j2] = 0;

        return true;
      } else {
        return false;
      }
    },
    triggerData() {
      let cells = [];

      let gameOver = false; //游戏是否结束
      let hasEmpty = false; //页面是否存在空位

      for (let i = 0; i < 4; i++) {
        for (let j = 0; j < 4; j++) {
          if (hasEmpty == false && this.optedData[i][j] == 0) {
            hasEmpty = true;
          }

          if (
            this.optedData[i][j] > 0 &&
            this.optedData[i][j] != this.currData[i][j]
          ) {
            // console.info("index: i=" + i + ",j=" + j);
            // console.info("old:" + this.currData[i][j]);
            // console.info("new:" + this.optedData[i][j]);
            cells.push(document.querySelector(`#cell-${i}-${j}`));
          }
        }
      }

      this.currData = JSON.parse(JSON.stringify(this.optedData));

      this.$nextTick(() => {
        cells.forEach((cell) => {
          cell.className =
            cell.className + " animate__animated " + this.animateClass;
        });
      });

      if (hasEmpty) {
        console.info("hasEmpty:", hasEmpty);
        return gameOver;
      } else {
        console.info("判断页面是否存在可以拖拽的方式");
        gameOver = true;
        for (let i = 0; i < 3; i++) {
          for (let j = 0; j < 3; j++) {
            if (this.optedData[i][j] == this.optedData[i][j + 1]) {
              console.info("存在相等的");
              gameOver = false;
              return gameOver;
            }

            if (this.optedData[i][j] == this.optedData[i + 1][j]) {
              console.info("存在相等的");
              gameOver = false;
              return gameOver;
            }
          }
        }

        if (gameOver) {
          console.info("游戏结束！！！");
        }
      }
    },
  },
};
</script>

<style lang="scss">
@import "./index.scss";
</style>
